<template>
  <div>
    <el-row type="flex" justify="end" style="padding: 15px;background: #fff;">
      <el-button type="primary" plain icon="el-icon-plus" size="small"  @click="addJurtion(1)">新增权限</el-button>
    </el-row>
    <div style='background: #fff;'>
      <el-collapse style='max-width: 1000px;margin: 0 auto' accordion>
        <el-collapse-item v-for="item in menuList" :key="item.id">
          <template slot="title">
            <el-row type="flex" align="center" style="padding:0 15px; width: 100%">
              <el-col>
                <icon-svg :icon="item.icon.indexOf('el-icon1-erp-') > -1 ? item.icon.split('el-icon1-erp-')[1] : item.icon" :style='{color:item.color}' /> {{item.pname}}
              </el-col>
              <el-col  style='text-align: right'>
                <el-button class="el-text-darager" style="margin-left:10px;" type="text" @click="deleteList(item.pid)">删除</el-button>
                <el-button class="el-text-check" type="text"  @click="addJurtion(2,item)">修改</el-button>
                <el-button class="el-text-success" type="text" @click="addJurtion(3,item)" v-if="item.link==''">添加子菜单</el-button>
              </el-col>
            </el-row>
          </template>
          <el-row style="padding:0 45px" v-if="item.subList.length>0">
            <el-row type="flex" justify="space-between" style="line-height:48px;border-bottom:1px solid #ebeef5"
                v-for="list in item.subList" :key="list.pid">
              <el-col>{{list.pname}}</el-col>
              <el-col style="text-align: right">
                <el-button @click="deleteList(list.pid)" class="el-text-danger" type="text">删除</el-button>
                <el-button class="el-text-check" type="text"  @click="addJurtion(4,list)">修改</el-button>
              </el-col>
            </el-row>
          </el-row>
          <el-row v-else style="padding-left: 30px"> 无子菜单(当前主菜单为跳转页面)</el-row>
        </el-collapse-item>
      </el-collapse>
    </div>
    <el-dialog :title="addOrEdit" v-dialogDrag :visible.sync="dialogTableVisible" width="800px" :close-on-press-escap="true">
      <el-form :model="params" ref="ruleForm" label-width="100px"  size="small">
        <el-form-item label="名称">
          <el-input v-model="params.pname" placeholder="名称" clearable/>
        </el-form-item>
        <el-form-item label="图标" v-if="type=='1'||type=='2'">
          <el-input v-model="params.icon" placeholder="" clearable/>
        </el-form-item>
        <el-form-item label="图标颜色">
          <el-input v-model="params.color" placeholder="" clearable/>
        </el-form-item>
        <el-form-item label="链接地址">
          <el-input v-model="params.link" placeholder="主菜单下有子菜单不能添加链接，否则页面跳转有问题" clearable/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="save()" :loading="isloadingSave">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        addOrEdit: '添加',                                    //添加 修改文本提示
        isloadingSave: false,                                 //保存权限
        dialogTableVisible: false,                            //对话框控制
        editId: '',                                           //被编辑的id
          params: {                                           //添加或者修改数据
          pname: '',
          link: '',
          icon: '',
          color:''
        },
        id: '',                                                  //被编辑的id
        type: '',                                                //操作状态
        menuList: [],
      }
    },
    methods: {
      addJurtion(type, row) {                                       // 打开对话框，去添加
        this.type = type
        if (type == '1') {
          this.addOrEdit = '添加主菜单'
          this.params.pname = ''
          this.params.link = ''
          this.params.icon = ''
          this.params.color = ''
        } else if (type == '2') {
          this.addOrEdit = '编辑主菜单'
          this.id = row.pid
          this.params.pname = row.pname
          this.params.link = row.link
          this.params.icon = row.icon
          this.params.color = row.color

        } else if (type == '3') {
          this.id = row.pid
          this.addOrEdit = '添加子菜单'
          this.params.pname = ''
          this.params.link = ''
          this.params.icon = ''
          this.params.color = ''
        } else if (type == '4') {
          this.id = row.pid
          this.addOrEdit = '编辑子菜单'
          this.params.pname = row.pname
          this.params.link = row.link
          this.params.icon = ''
          this.params.color = row.color
        }
        this.dialogTableVisible = true
      },
      getsubList() {//获取菜单数据
        this.isloading = true
        this.$http.get('/server/purview/select?').then(res => {
          if (res.data.success) {
            if (res.data.data.length > 0) {
              this.menuList = res.data.data
            }
          }
        }).finally(() => { this.isloading = false })
      },
      deleteList(pid) { // 删除菜单
        this.isloadingSave = true
        this.$http.get('/server/purview/delete?pid='+pid).then(res => {
          if (res.data.success) {
            this.dialogTableVisible = false
            this.getsubList()
          }
        }).finally(() => { this.isloadingSave = false })
      },
      save() {
        const params = { ...this.params }
        this.isloadingSave = false
        if (this.type == '1') {
          this.$http.post('/server/purview/save', JSON.stringify(params)).then(res => {
            if (res.data.success) {
              this.dialogTableVisible = false
              this.getsubList()
            }
          }).finally(() => { this.isloadingSave = false })
        } else if (this.type == '2') {
          params.pid = this.id
          this.$http.post('/server/purview/update', JSON.stringify(params)).then(res => {
            if (res.data.success) {
              this.dialogTableVisible = false
              this.getsubList()
            }
          }).finally(() => { this.isloadingSave = false })
        } else if (this.type == '3') {
          params.byid = this.id
          this.$http.post('/server/purview/save', JSON.stringify(params)).then(res => {
            if (res.data.success) {
              this.dialogTableVisible = false
              this.getsubList()
            }
          }).finally(() => { this.isloadingSave = false })
        } else if (this.type == '4') {
          params.pid = this.id
          this.$http.post('/server/purview/update', JSON.stringify(params)).then(res => {
            if (res.data.success) {
              this.dialogTableVisible = false
              this.getsubList()
            }
          }).finally(() => { this.isloadingSave = false })
        } else {
          this.$alert('未知修改，请刷新重试', '提示')
        }
      }
    },
    mounted() {
      this.getsubList()
    }
  }
</script>
<style scoped>

  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    font-size: 14px;
    padding-right: 8px;
  }

  .tree {
    background: #fff;
    padding: 15px;
  }

  .save-a li {
    line-height: 50px;
  }

  .save-a li span {
    width: 100px;
    text-align: left;
  }
</style>
